<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="10" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
 .fl{float: left}
        .fr{float: right;}
        .banner{width: 100%}
        .banner img{width: 100%}
        .service-case{padding-top: 90px;padding-bottom: 55px;}
        .service-case ul{margin-top: 50px;overflow:hidden;}
        .service-case ul li{border:1px solid #f4f4f4;border-radius:10px;position:relative;padding-bottom: 12px;border-radius:8px;float: left;width: 265px;background:#ffffff;margin-right: 25px;}
        .service-case ul li:nth-of-type(4){margin-right: 0px;}
        .service-case ul li img{display:block;width: 240px;margin: 20px auto}
        .service-case ul li .txt{font-size:16px;margin-left: 25px;color: #c6944e;}
        .details{margin-top: 48px;}
        .details h3{margin-top:2px;font-size: 22px;}
        .details .change-page{border: 1px solid #8b8b8b;color: #8b8b8b;height:42px;width: 162px;line-height: 42px;
        text-align: center;border-radius: 20px;}
        .change-page a{color: #8b8b8b}
        .details  .txt{clear: both;padding-top: 40px;}
        .details .pic{width:641px;height: 453px; }
        .details .tit{font-size: 16px;color: #000000;}
        .details .line{height: 1px;width: 44px;background: #cbcbcb;margin: 15px 0 0;display: block;}
        .details .abstract{line-height: 22px;letter-spacing: 1px;padding-bottom: 12px;padding-top: 25px;}
        .details .infos{border-bottom: 1px solid #ddd;margin: 20px 0 0;padding-bottom: 20px;}
        .contact{width: 152px;height: 36px;line-height: 36px;text-align: center;background: #c18a3c;
            color: #ffffff;display: inline-block;float: left;border-radius: 20px;margin-top: 55px;}
        .contact:hover{color: #ffffff;}
        .share{margin-top:65px;}
        .share a{color: #555555;}
        .tab-content{margin-top:25px;padding-top: 50px;padding-bottom:60px;overflow: hidden;background: #ffffff}
        .tab-content .con1 li{margin-bottom:5px;border: 1px solid #c18a3c;border-radius: 6px;
            position: relative;   float: left;  width: 190px; height: 238px;overflow: hidden; margin-right: 5px;}
        .tab-content .con1 li:nth-of-type(5){    width: 330px;  margin-right: 0; }
        .tab-content li img{border-radius:6px;width: 100%;height: 100%;}
        .tab-content .con1 li .txt{position: absolute;left:50%;bottom:10px;background: rgba(188,141,74,0.9);color: #ffffff;width: 150px;height:65px;margin-left: -75px;border-radius: 4px;text-align: center}
        .tab-content .con1 li:nth-of-type(5) .txt{width: 300px;margin-left: -150px;}
        .tab-content li .txt span{display: block}
        .tab-content li .txt .name{margin-top: 5px;}
        .tab-content li .txt .line{height: 1px;width:20px;margin: 5px auto;background: #ffffff }
        .tab-content li .txt .money{font-size: 13px; }
        .tab-content .con1{overflow: hidden;}
        h3{font-size: 24px;color: #555555}
        .en-tit{position: relative;color:#dab75b ;top:10px;left: 50%;margin-left: -100px;}
        .en-tit .line,.en-tit .line2{position:absolute;top:15px;display:inline-block;height: 1px;width:60px;background: #dab75b }
        .en-tit .line{left: -70px;}
        .en-tit .line2{left: 195px;}
        .related-case{margin-top:100px; }
        .border{border-bottom: 1px solid #cbcbcb;}
        .line-h{line-height: 30px;}
        .color-gray{color: #9d9d9d;margin-left: 30px;}
        .m-l{margin-left: 50px;}
        @media screen and (min-width: 768px){
            .carousel-indicators {  bottom: -70px;  }  }
        .carousel-indicators li { margin-right: 6px;   background-color: #dab75b;  border: 0;  }
        .carousel-indicators li.active{background: #c18a3c;margin-right: 6px;}
        .carousel .item img{height: 461px;width: 100%;}
        .menu-wrap{    position: relative;}
		.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
		.business-wrap{position: absolute;left:175px;top:11px;height:432px;}

</style>
</head>
<body class="">
<div id="app" >
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li @mouseover="selectAd('${item.adUrl }')"><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>
	</div>
	 <div class="container">
        <div class="details">
        <cms:art var="art" id="${param.id }" queryAround="true"></cms:art>
            <h3 class="fl">${art.artTitle }</h3>
            <div class="fr change-page">
            <c:if test="${not empty prev }"> <a href="${path }/redirect/serviceDetails?id=${prev.artId}">上一篇</a></c:if>
          &nbsp;|&nbsp;
            <c:if test="${not empty next }"> <a href="${path }/redirect/serviceDetails?id=${next.artId}">下一篇</a></c:if>
           </div>
            <div class="row txt">
                <div class="col-md-7">
                    <div class="carousel-wrap">
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                            <!-- 轮播（Carousel）指标 -->
                            <ol class="carousel-indicators">
                            <c:forEach items="${art.images }" var="item" varStatus="count">
								<li data-target="#myCarousel" data-slide-to="${count.index}"
									<c:if test="${count.index eq 0 }">class="active"</c:if>></li>
							</c:forEach>
                            </ol>
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner">
								<c:forEach items="${art.images }" var="item" varStatus="count">
									<div
										class='<c:if test="${count.index eq 0 }">active</c:if> item'>
										<img src="${item.path }">
									</div>
								</c:forEach>
							</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <span class="tit">${art.artTitle }</span>
                    <span class="line"></span>
                    <div>
                    ${art.artContent }
                    </div>
                    <a href="" class="contact">联系我们</a>
                    <span class="fr share" ><img src="${path }/resource/images/share.png" alt="">&nbsp;&nbsp;<a href="">分享</a></span>
                </div>
            </div>
            
        </div>
    </div>
    <div class="container" >
        <div class="related-case">
            <h3 class="text-center">相关项目</h3>
            <h3 class="en-tit"><span class="line"></span>Related Projects<span class="line2"></span></h3>
            <div class="tab-content">
                <div class="container" style="padding: 0px;">
                    <ul class="con1">
                    <li v-for="item in xgxm" @click="toArticle(item.artId)"><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
    </div>
		<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 100,
			ads:[],
			xgxm : [],
		},
		
		methods : {
			toArticle : function(id) {
				window.open("${path}/redirect/serviceDetails?id=" + id);
			},
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			},
			loadOtherArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 5,
						"artTypeId" : "${art.artTypeId}"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.xgxm = loj.getValue("rows");
				});
			}
		},
	});
	app.loadOtherArt();
	
	$(".tab li").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
        $(".tab-content").find("ul").hide();
        $(".tab-content").find("ul").eq($(this).index()).show()
    })


</script>

</body>
</html>
